// 1.饼形图
// 封装函数有两个优点:1.避免变量污染 2.方便未来ajax渲染
// 函数自调用不能重复使用,但是可以减少变量,不用取函数名\

// (function () {
//     // 1.初始化echarts实例对象
//     const myChart = echarts.init(document.querySelector())
//     // 2.定义图形参数
//     const option = {};
//     // 3.渲染echarts实例
//     myChart.setOption(option)
// })()

function setPie(obj) {
  // 1.初始化echarts实例对象
  const myChart = echarts.init(document.querySelector('.pie'))
  // 2.定义图形参数
  const option = {
    title: {
      text: '籍贯Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 删除图例组件legend
    // 删除工具栏组件toolbox
    // 提示框组件
    tooltip: {
      // trigger:'item'触发类型,默认就是元素
      // 饼图: {a}（系列名称），{b}（数据项名称）
      //       {c}（数值）, {d}（百分比）
      // 可以用html标签和行内样式
      formatter: '{a}<br>{b} <b>{c}</b>人 占比{d}%'
    },
    series: [
      {
        name: '各地人员分布',
        type: 'pie',//控制图形的类型(不用动)
        radius: ['10%', '60%'],//内外圆的半径
        center: ['50%', '50%'],//圆心位置
        roseType: 'area',//aera面积模式(所有扇区圆心角相同，仅通过半径展现数据大小)
        // radius半径模式(扇区圆心角展现数据的百分比，半径展现数据的大小)
        itemStyle: {//元素样式,边框圆角
          borderRadius: 4
        },
        data: obj
      }
    ]
  };
  // 3.渲染echarts实例
  myChart.setOption(option)
};
// 页面加载的时候调用,函数不调用不执行
setPie()

// 2.折线图
function setLine(obj) {
  // 1.初始化echarts实例对象
  const myChart = echarts.init(document.querySelector('.line'))
  // 2.定义图形参数
  const option = {
    // 删除了控制xAxis的数据data
    // 提示框组件不用动
    tooltip: {
      trigger: 'axis',//坐标轴触发
      position: function (pt) {
        // 定位:x轴根据数据移动,y轴固定值
        return [pt[0], '10%'];
      }
    },
    title: {
      // left: 'center',
      text: '薪资Salary',
      textStyle: { color: '#6d767e' }
    },
    // 删除工具栏组件toolbox
    // xAxis不做修改
    xAxis: {
      type: 'category',
      boundaryGap: false,//是否在刻度中间显示(留白策略)
      data: obj.name
    },
    yAxis: {
      type: 'value',
      // 纵坐标的boundaryGap,控制最大值(但是要考虑步长)
      boundaryGap: [0, '50%']
    },
    dataZoom: [
      {
        // inside鼠标滚轮缩放,slider滑块缩放
        type: 'slider',
        start: 0,
        end: 50
      },
    ],
    // 添加图例组件
    legend: {
      top: 20
    },
    // 设置颜色
    color: ['#6d767e', '#ee6666'],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'none',//转折点circle圆点,none无状态
        smooth: true,//转折位置是否平滑
        // sampling: 'lttb',
        itemStyle: {
          color: 'red'
        },
        // 删除折现下方面积样式areaStyle
        // 修改了折线的数据
        data: obj.salary
      }, {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',//转折点circle圆点,none无状态
        smooth: true,//转折位置是否平滑
        // sampling: 'lttb',
        itemStyle: {
          color: 'blue'
        },
        // 删除折现下方面积样式areaStyle
        data: obj.truesalary
      }
    ]
  };
  // 3.渲染echarts实例
  myChart.setOption(option)
};
// setLine()

// 3.柱形图 - 封装成函数特点:变量名方便,方便ajax渲染
function setBar(obj) {
  let myChart = echarts.init(document.querySelector('.barChart'))
  let option = {
    // 提示框组件 - 不需要修改
    tooltip: {
      trigger: 'axis',//坐标轴触发
      axisPointer: {
        type: 'cross',//十字交叉触发,但是被x轴阴影覆盖了
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 工具栏组件删除 - toolbox
    // legend保留,但是里面的data要删除
    legend: {
      // 未来使用series里的数据
    },
    xAxis: [
      {
        type: 'category',
        data: obj.group.map(item => item + '组'),
        axisPointer: {
          type: 'shadow'//鼠标进入,带有阴影
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // name: 'Precipitation',不需要y轴名称
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        // name: 'Temperature',不需要y轴名称
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        yAxisIndex: 0,//y轴索引值
        // tooltip: {
        // 提示框组件 单位
        //   valueFormatter: function (value) {
        //     return value + ' 分';
        //   }
        // },
        data: obj.avgScore,
        // 柱条的宽度
        barWidth: '15'
      },

      {
        name: '低于60分人数',
        type: 'bar',
        yAxisIndex: 1,
        // less than  简写ls
        data: obj.lt60,
        // 柱条的宽度
        barWidth: '15'
      },
      {
        name: '60到80分之间',
        type: 'bar',
        yAxisIndex: 1,
        data: obj.gt60,
        // 柱条的宽度
        barWidth: '15'
      }, {
        name: '高于80分人数',
        type: 'bar',
        yAxisIndex: 1,
        data: obj.gt80,
        // 柱条的宽度
        barWidth: '15'
      }
    ],
    // 调整网格
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    }
  }
  myChart.setOption(option)
}
// 函数不调用,不执行
// setBar()//页面加载的时候默认调用应该删除/注释掉,不然不会出现效果

// 4.地图 - 封装成函数特点:变量名方便,方便ajax渲染
function setMap(a, b) {

  let myChart = echarts.init(document.querySelector('.map'))

  // 位置 + 经纬度
  var chinaGeoCoordMap = a;
  var chinaDatas = b;

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['顺义校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    // tooltip: {
    //   trigger: 'item',
    //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
    //   borderColor: '#FFFFCC',
    //   showDelay: 0,
    //   hideDelay: 0,
    //   enterable: true,
    //   transitionDuration: 0,
    //   extraCssText: 'z-index:100',
    //   formatter: function (params, ticket, callback) {
    //     //根据业务自己拓展要显示的内容
    //     var res = "";
    //     var name = params.name;
    //     var value = params.value[params.seriesIndex + 1];
    //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //     return res;
    //   }
    // },
    // backgroundColor: "#013954",
    // visualMap: { //图例值控制
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   show: false,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };
  myChart.setOption(option)
}
// 函数不调用,不执行
// setMap()


// 需求1:渲染 班级概况;(页面一加载直接渲染)
axios({
  method: 'get',
  url: '/student/overview'
}).then(({ data: res }) => {
  // 判断业务状态码,渲染数据
  console.log(res);
  if (res.code == 0) {
    document.querySelector('.total').innerHTML = res.data.total
    document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
    document.querySelector('.avgAge').innerHTML = res.data.avgAge
    document.querySelector('.proportion').innerHTML = res.data.proportion
  }
})

// 需求2:柱形图 制作
// 思路1:点击图标现实隐藏第几次成绩
const btn = document.querySelector('.btn')
const batch = document.querySelector('#batch')
btn.addEventListener('click', function () {
  // 判断行内的style属性值是否为none
  if (batch.style.display == 'none') {
    batch.style.display = 'block'
  } else {
    batch.style.display = 'none'
  }
})

// 思路2:点击第几次成绩,在图表中渲染
const lis = document.querySelectorAll('#batch  li')
// 利用for循环,注意:是为了绑定点击事件(foreach)
// 用事件委托也可以
for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function () {
    console.log(i);
    // 发送ajax,获取数据
    axios({
      method: 'get',
      url: '/score/batch',
      // 查询参数用params
      params: {
        batch: i + 1//query是查询参数,body是请求体参数
      }
    }).then(({ data: res }) => {
      // console.log(res);
      if (res.code == 0) {
        setBar(res.data)
      }
    })
  })
}
// lis.forEach(function (ele, index) { })

// 思路3：页面加载的时候，触发第一个li标签
lis[0].click()//放进for循环也可以,但是不能放进点击事件里

// 需求3:折线图/饼形图/地图 制作;(来源于同一个ajax)
axios({
  method: 'get',
  url: '/student/list'
}).then(({ data: res }) => {
  // console.log(res);
  // 判断业务状态码
  if (res.code == 0) {
    // 3.1 折线图 - 制作
    // 思路分析:我们需要从res.data中组合出三个数组,学生姓名,期望薪资,实际薪资;
    const lineDate = {
      name: [],//学生姓名
      salary: [],//期望薪资
      truesalary: []//实际薪资
    }

    // 3.2 饼形图 - 制作 ; 只需要一个数组即可!(数组中的元素是对象)
    //    例如:[{value:40,name:'河北省'},{value:88,name:'湖北省'}]
    //    定义一个数组,将来里面放入对象
    // 将来,我们要在forEach()循环判断:
    //      1.学生本人的省份,在pieData中是否存在
    //      2.如果存在value+1,不存在则添加一个对象{value:1,name:item.province}
    const pieData = []

    // 3.3 地图 - 制作 ; (需要两个变量:一个对象,一个数组)
    const mapData1 = { '顺义校区': [116.4551, 40.2539] }
    const mapData2 = []

    // 循环遍历 res.data(所有学生信息),把学生姓名,期望薪资,实际薪资;放入指定的数组中
    res.data.forEach(item => {
      // console.log(item);
      // 向数组中添加指定内容
      lineDate.name.push(item.name)
      lineDate.salary.push(item.salary)
      lineDate.truesalary.push(item.truesalary)

      // 在forEach()循环判断:学生本人的省份,在pieData中是否存在
      let obj = pieData.find(ele => ele.name == item.province)
      let index = pieData.findIndex(ele => ele.name == item.province)
      // 判断是否存在
      // if(index == -1){//索引值为-1,也证明元素不存在
      if (obj == undefined) {
        // 如果数组中不存在学生所在省份,就在数组中添加该省份
        pieData.push({ value: 1, name: item.province })
      } else {
        // 如果数组中,存在学生所在的省份,让value+1
        pieData[index].value++
      }

      // 
      mapData1[item.county] = [item.jing, item.wei]

      let obj2 = mapData2.find(ele => ele[0].name == item.county)
      let index2 = mapData2.findIndex(ele => ele[0].name == item.county)
      if (obj2 == undefined) {
        // 如果数组中不存在学生所在省份,就在数组中添加该省份
        mapData2.push([{ name: item.county, value: 1 }])
      } else {
        // 如果数组中,存在学生所在的省份,让value+1
        mapData2[index2][0].value++
      }

    })
    // 循环外面,if里面,进行输出结果
    // console.log(lineDate);
    // console.log(pieData);
    // console.log(mapData1);
    // 渲染 折线图
    setLine(lineDate)
    setPie(pieData)
    setMap(mapData1, mapData2)
  }
})
// 理解对象
        // // 对象是无序的数据集合
        // let dog = {
        //     // 键名:值  键值对
        //     // key:value
        //     name: '老黄',
        //     age: 20,
        //     color: 'black'
        // }
        // console.log(dog[`age`]);
        // // 对象的遍历
        // for (let k in dog) {
        //     // k就是对象里面的属性名
        //     console.log(k);
        //     console.log(dog.k)//undefined

        //     // 对象名[k]  对象里的属性值
        //     //不能用dog['k'],不然对应的是对象里的属性名,而不是变量k
        //     console.log(dog[k]);
        // }
